Buttons

Create a button with a button or a element to retain the native click function. Use a disabled attribute when a button can’t be clicked.

Basedev ready

Preview

Code

<button class="slds-button">Button</button>

The base .slds-button looks like a plain text link. It removes all the styling of the native button. It’s typically used to trigger a modal or display a “like” link. All button variations are built by adding another class to .slds-button.

Add the .slds-button--neutral class to create a neutral button, which has a white background and gray border.

Use a neutral icon button is for buttons with an icon on the left or right (not for stateful buttons). Add the .slds-button--neutral class to .slds-button.

The SVG inside receives the .slds-button__icon class. You can position the icon on the right or the left using .slds-button__icon--right or .slds-button__icon--left , which apply the correct amount of space between the icon and the text.

To create the brand button, add the .slds-button--brand class to the .slds-button class.

To create the destructive button, add the .slds-button--destructive class to the .slds-button class.

Use the inverse button on dark backgrounds. Add the .slds-button--inverse class to the .slds-button class.

Statefuldev ready

Preview

Code

<button class="slds-button slds-button--neutral slds-not-selected" aria-live="assertive">
  <span class="slds-text-not-selected">
    <svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
    </svg>Follow</span>
  <span class="slds-text-selected">
    <svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
    </svg>Following</span>
  <span class="slds-text-selected-focus">
    <svg aria-hidden="true" class="slds-button__icon--stateful slds-button__icon--left">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
    </svg>Unfollow</span>
</button>

The stateful button requires the .slds-button--neutral class in addition to the .slds-button class.

The stateful inverse button works just like the stateful button. It requires the .slds-button--inverse class in addition to the .slds-button class.

It uses the class .slds-not-selected in its initial state. When the user activates the button, use JavaScript to toggle the class to .slds-is-selected. The button contains three spans with classes that hide or show the content of the spans based on the class on the button. Each span contains text and a corresponding icon. The SVG will have the .slds-button__icon--stateful class as well as the .slds-button__icon--left class setting the icon on the left.

Stateful icons can be toggled on and off and retain their state. Like stateful buttons, the initial state is .slds-not-selected, and JavaScript is used to toggle it to .slds-is-selected when activated.

Accessibility

For accessibility, include the attribute aria-live="assertive" on the button. The aria-live="assertive" attribute means the value of the &lt;span&gt; inside the button will be spoken whenever it changes.

Icondev ready

Preview

Code

<button class="slds-button slds-button--icon">
  <svg aria-hidden="true" class="slds-button__icon">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
  </svg>
  <span class="slds-assistive-text">Settings</span>
</button>

The various button icons vary in the amount of space they use on the page. Some have background colors, and some are transparent.

  • .slds-button--icon-bare does not take up the 36px height that a normal button does. Although you create it with a ‹button› element, it looks like a plain icon and is the height of the icon.
  • .slds-button--icon-container looks like an icon and takes the default space of a button (36px). It has no background or border.
  • .slds-button--icon-border includes a border. It is the default size (36px).
  • .slds-button--icon-border-filled adds a background color and border like the .slds-button--neutral.
  • .slds-button--icon-small changes the default size of 36px to the size of 32px.
  • .slds-button--icon-x-small changes the default size of 36px to the size of 20px.
  • Use .slds-button__icon--x-small in an.slds-icon--more icon button to indicate that more information is available..
  • Use .slds-button__icon--small within .slds-button__icon--hint on rows in which hovering over the parent element or table row causes the button to brighten up.
  • The normal sized .slds-button__icon is used in many places, including small close icons on alerts.
  • Use .slds-button__icon--large to create a large close button for modals and toasts. It’s usually used with .slds-button--inverse.

The classes added to each button are added to the base .slds-button class. The <svg> inside the buttons all have the base class of .slds-button__icon.

A hint button is grayed out until its parent is hovered over. Then the hover and focus states are just like a regular icon button.

The parent element must have the class .slds-hint-parent, and the icon inside the button has the class .slds-button__icon--hint.

Use the small button with the down icon in rows and action menus. Add the class .slds-button--icon-x-small on the button. Use .slds-button__icon--small for the inside icon.

Accessibility

Icons without identifying text must have descriptive text in a .slds-assistive-text.

Component Overview

Accessibility

If an icon button doesn’t include a label, use a span with .slds-assistive-text to describe the icon for screen readers.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create buttons.
Class NameUsage
.slds-button
Applied to:

button or link

Outcome:

Initializes a 2.25rem (36px) height button

Required:

Required

Comments:

This neutralizes all the base styles making it look like a text link

.slds-button--small
Applied to:

.slds-button

Outcome:

Creates a smaller 2rem (32px) button

Required:

No, optional element or modifier

Comments:

--

.slds-button--neutral
Applied to:

.slds-button

Outcome:

Creates the gray border with white background default style

Required:

No, optional element or modifier

Comments:

--

.slds-button--brand
Applied to:

.slds-button

Outcome:

Creates the brand blue Salesforce style

Required:

No, optional element or modifier

Comments:

--

.slds-button--destructive
Applied to:

.slds-button

Outcome:

Creates a red button style

Required:

No, optional element or modifier

Comments:

The use case for this button is things like delete, cancel, and end call rather than errors.

.slds-button--inverse
Applied to:

.slds-button

Outcome:

Creates the inverse style for dark backgrounds

Required:

No, optional element or modifier

Comments:

--

.slds-button--icon
Applied to:

.slds-button

Outcome:

Creates a button that looks like a plain icon

Required:

No, optional element or modifier

Comments:

This is 1rem×1rem like an icon, not a regular button

.slds-button--icon-bare
Deprecated
Applied to:

.slds-button

Outcome:

Creates a button that looks like a plain icon

Required:

No, optional element or modifier

Comments:

This is 1rem×1rem like an icon, not a regular button

.slds-button--icon-container
Applied to:

.slds-button

Outcome:

Creates a button that looks like a plain icon

Required:

No, optional element or modifier

Comments:

This is 2.25rem×2.25rem like a button

.slds-button--icon-border
Applied to:

.slds-button

Outcome:

Creates an icon button with a border

Required:

No, optional element or modifier

Comments:

There is no background color until hover for this style

.slds-button--icon-border-filled
Applied to:

.slds-button

Outcome:

Creates an icon button with a border

Required:

No, optional element or modifier

Comments:

This is 2.25rem×2.25rem like a button

.slds-button--icon-inverse
Applied to:

.slds-button

Outcome:

Gives a white icon color on a dark background

Required:

No, optional element or modifier

Comments:

When used alone it has a subtle hover. When used in a button-group it assumes the hover state of the buttons next to it.

.slds-button--icon-small
Applied to:

.slds-button

Outcome:

Creates an icon button at the smaller 2rem (32px) size

Required:

No, optional element or modifier

Comments:

Be aware that this sizes the button, not the icon

.slds-button--icon-x-small
Applied to:

.slds-button

Outcome:

Creates an icon button at the smaller 1.25rem (20px) size

Required:

No, optional element or modifier

Comments:

Be aware that this sizes the button, not the icon

.slds-button--icon-more
Applied to:

.slds-button

Outcome:

Used for the style where only two icons are in a button

Required:

No, optional element or modifier

Comments:

This is usually an icon with a down arrow icon next to it. Each svg within is sized separately

.slds-button__icon
Applied to:

svg

Outcome:

Sets the size and color of the icon inside a button

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--stateful
Applied to:

svg

Outcome:

This makes the icon the same color as the text in the button

Required:

No, optional element or modifier

Comments:

This is not used in addition to .slds-button__icon but instead of

.slds-button__icon--left
Applied to:

.slds-button__icon

Outcome:

Puts the icon on the left side of the button

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--right
Applied to:

.slds-button__icon

Outcome:

Puts the icon on the right side of the button

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--x-small
Applied to:

.slds-button__icon

Outcome:

Creates a .5rem (8px) size icon

Required:

No, optional element or modifier

Comments:

This is added to the icon inside the .slds-button, not the button itself

.slds-button__icon--small
Applied to:

.slds-button__icon

Outcome:

Creates a .75rem (12px) size icon

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--large
Applied to:

.slds-button__icon

Outcome:

Creates a 1.5rem (24px) size icon

Required:

No, optional element or modifier

Comments:

--

.slds-button__icon--hint
Applied to:

.slds-button__icon

Outcome:

Creates a grayed out icon until the parent is hovered

Required:

No, optional element or modifier

Comments:

The parent must have the .slds-hint-parent class applied

.slds-button-space-left
Applied to:

button parent

Outcome:

Adds space on the left of a button wrapped in a parent

Required:

No, optional element or modifier

Comments:

Only required if the .slds-button is wrapped. ie- to include a dropdown